<template>
  <div class="expert-detail-page">
    <front-header />
    <div class="detail-card">
      <div class="header">
        <el-image 
          :src="getImageUrl(expert.avatar)"
          class="avatar" 
          fit="cover"
          :preview-src-list="[expert.avatar]"
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-user-solid"></i>
          </div>
        </el-image>
        <div class="main-info">
          <h1 class="name">{{ expert.name }}</h1>
          <div class="title">{{ expert.title }}</div>
          <div class="field">{{ expert.field }}</div>
        </div>
      </div>
      <el-divider />
      <div class="desc-group">
        <div><b>简介：</b>{{ expert.description }}</div>
        <div><b>联系方式：</b>{{ expert.phone }} / {{ expert.email }}</div>
      </div>
      <div class="btn-row">
        <el-button type="primary" @click="goAppointment">预约该专家</el-button>
        <el-button @click="goBack">返回</el-button>
      </div>
    </div>
    <front-footer />
  </div>
</template>
<script>
import { getExpertDetail } from '@/api/ExpertController';
import FrontHeader from "@/components/front/FrontHeader.vue";
import FrontFooter from "@/components/front/FrontFooter.vue";
export default {
  components: {FrontFooter, FrontHeader},
  data() {
    return {
      expert: null
    };
  },
  methods: {
    goAppointment() {
      this.$router.push({ name: 'ExpertAppointment', params: { expertId: this.$route.params.expertId } });
    },
    goBack() {
      this.$router.back();
    },
    getImageUrl(url) {
      if (!url) return ''
      return url.startsWith('/api') ? url : `/api${url}`
    },
    async loadExpert() {

      const response = await getExpertDetail(this.$route.params.expertId);
      const res = response.expert;
      this.expert = Array.isArray(res) ? res[0] : res;
    }
  },
  mounted() {
    this.loadExpert();
  }
};
</script>
<style scoped>
.expert-detail-page {
  padding: 32px 24px;
  background: #f7f8fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.detail-card {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  padding: 32px 40px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 32px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.name {
  font-size: 24px;
  font-weight: 600;
  color: #222;
  margin-bottom: 8px;
}

.title {
  color: #409EFF;
  font-size: 16px;
  margin-bottom: 6px;
}

.field {
  color: #909399;
  font-size: 14px;
}
</style>
.desc-group {
  margin-top: 20px;
  line-height: 2;
  font-size: 15px;
}
.btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 28px;
}
</style>